<template>
  <div style="width: 100%;">
    <a-form :form="form" layout="inline" class="ant-advanced-search-form form-item-bottom-num">
      <row
      style="display: inline-block;"
      v-for="(item, index) in formItem"
      :key="item.model"
      :class="{'witdh100':item.type == 'line','row-w100':item.className=='row-w100'}"
      >
        <div v-if="item.type == 'line'" style="border-top: 1px solid rgb(233 228 228);margin: 10px 0;"/>
        <a-form-item
          v-else
          :label="item.label"
          ref="formSlot"
          :class="item.className?item.className:''"
        >
          
          <slot
            :name="item.slot"
            :row="item"
            :model="item.model"
            :form="form"
            :is="false"
            :flag="showNameIs"
            :index="index"
            :click="showOnSlot.click"
          >
          
          <a-input-password 
            v-if="item.type === 'input-password'"
            autocomplete="new-password"
            v-decorator="[
              `${item.model}`,
              { rules: item.rules ? item.rules : [] },
            ]"
            :placeholder="'请输入' + item.label"
            :disabled="item.disabled || false"
          />
            <a-input
              v-if="item.type === 'input'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :placeholder="'请输入' + item.label"
              :disabled="item.disabled || false"
            />
            <a-input
              v-if="item.type === 'number'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :placeholder="'请输入' + item.label"
              :disabled="item.disabled || false"
              type="number"
            />
            <a-select
              v-if="item.type === 'select'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :placeholder="'请选择' + item.label"
              :disabled="item.disabled || false"
            >
              <a-select-option
                v-for="sop in item.option || []"
                :key="sop.value"
                :value="sop.value"
                :disabled="item.disabled || false"
              >
                {{ sop.name }}
              </a-select-option>
            </a-select>

            <!-- 
                :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
              " -->
            <a-date-picker
              v-if="item.type === 'datetime'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :disabled="item.disabled || false"
              :placeholder="'请选择' + item.label"
              @change="
                handlerPicker(
                  $event,
                  item.format || 'YYYY-MM-DD HH:mm:ss',
                  item.model,
                  item.rules
                )"
              :format="item.rules?'':(item.format || 'YYYY-MM-DD HH:mm:ss')"
              :autoFocus="true"
              @focus="
                panelChange(
                  $event,
                  item.format || 'YYYY-MM-DD HH:mm:ss',
                  item.model
                )
              "
            />
            <a-textarea
              v-if="item.type === 'textarea' && !item.toHeight"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :disabled="item.disabled || false"
              :placeholder="'请输入' + item.label"
              :auto-size="item.option ? item.opinion : {}"
              class="resize"
            />

            <a-textarea
              v-if="item.type === 'textarea' && item.toHeight"
              :style="item.style || {}"
              class="resize"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :disabled="item.disabled || false"
              :placeholder="'请输入' + item.label"
              :auto-size="item.option ? item.opinion : {}"
            />

            <a-radio-group
              :name="item.label || index"
              v-if="item.type === 'radio'"
              :options="item.option || []"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :disabled="item.disabled || false"
            >
            </a-radio-group>
            <compSelector
            v-if="item.type === 'comp-selector-type'"
            v-decorator="[
              `${item.model}`,
              { rules: item.rules ? item.rules : [] },
            ]"
            :width="150"
            :compType="item.compType"
            :defaultValue="item.compType==='Checkbox'?(Array.isArray(form.getFieldValue(`${item.model}`))?form.getFieldValue(`${item.model}`):(form.getFieldValue(`${item.model}`)?form.getFieldValue(`${item.model}`).split(','):[])) : form.getFieldValue(`${item.model}`)"
            :dictionaryType="item.dictType"
            :separateAreas="item.dictType"
            :disabled="item.disabled"
            @selectHandleChange="selectHandleChange($event,item.model)"
            />
            <!-- 数字字典 -->
            <ych-dict-select-tag
              v-if="item.type === 'ych-dict-select-tag'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :type="'radio'"
              :dictCode="item.dictType"
              :disabled="item.disabled || false"
              @change="handlerDictSelect($event, item.model)"
              @input="handlerDictSelect($event, item.model)"
            />

            <ych-multi-select-tag
              v-if="item.type === 'ych-multi-select-tag'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :type="'checkbox'"
              :dictCode="item.dictType"
              :disabled="item.disabled || false"
            />

            <ych-multi-select-tag
              v-if="item.type === 'ych-select-tag'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :mode="item.mode || ''"
              :type="'select'"
              :dictCode="item.dictType"
              :disabled="item.disabled || false"
            />

            <!-- <a-checkbox-group
            :name="item.label || index"
            v-if="item.type === 'checkbox'"
            :options="item.option || []"
            v-decorator="[
              `${item.model}`,
              { rules: item.rules ? item.rules : [] },
            ]"
            :disabled="item.disabled || false"
          >
          </a-checkbox-group> -->
            <slot name=""></slot>
          </slot>
        </a-form-item>
      </row>
      <slot name="save"></slot>
    </a-form>
  </div>
</template>

<script>
import moment from "moment";
import checkboxGroup from "@/views/everydayCheck/components/checkbox-group";
import YchDictSelectTag from "@/components/dict/YchDictSelectTag";
import YchMultiSelectTag from "@/components/dict/YchMultiSelectTag";
import compSelector from '@/components/compSelector/compSelector'
export default {
  name: "everday-form",
  components: {
    YchMultiSelectTag,
    YchDictSelectTag,
    compSelector,
  },
  props: {
    formLayout: {
      type: String,
      default() {
        return "horizontal";
      },
    },
    beforeCreate: {
      type: Function,
    },
    formItem: {
      type: Array,
      default: [],
    },
    labelcol: {
      type: Object,
      default() {
        return { span: 5 };
      },
    },
    wrappercol: {
      type: Object,
      default() {
        return { span: 12 };
      },
    },
    type: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "id",
    },
  },

  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      slotForm: {},
      showNameIs: false,
      showOnSlot: {
        flag: [],
        click: (index, slot) => {
          let flag = false;
          return !flag;
        },
      },
      datapickerDefault: undefined,
      compSelectorKey:null,
    };
  },
  created() {
    //console.log(this.form)
    if (this.beforeCreate) {
      this.beforeCreate(this.form, this.type, this.id);
    }
  },
  mounted() {
    if (this.beforeCreate) {
      this.beforeCreate(this.form, this.type, this.id);
    }
  },
  methods: {
    moment,
    handlerPicker(date, format, prototype, rules) {
      if(!rules){
        let obj = {};
        obj[prototype] = date ? moment(date).format(format) : "";
        this.form.setFieldsValue(obj);
        //console.log(this.form.getFieldValue(`${prototype}`));
      }
      
    },
    panelChange(event, format, model) {
      let valeu = this.form.getFieldValue(`${model}`) || "";
      if (valeu.indexOf("Invalid date") !== -1) {
        this.form.resetFields([`${model}`]);
      }
    },
    selectHandleChange(val,model){
      let data = {}
      data[model] = val
      this.form.setFieldsValue(data);
    },
  },

  watch: {
    formItem: {
      immediate: true,
      deep: true,
      handler() {
        this.formItem.filter((f) => {
          if (f.model) {
            f.model.trim();
          }
          if (f.axios) {
            f.axios();
          }
          
          return f;
        });
      },
    },
  },
  filters: {},
};
</script>

<style lang="less" scoped>
.ant-advanced-search-form {
  padding: 24px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  width: 100% !important;
}
::v-deep .ant-col .ant-form-item-control-wrapper {
  width: 100%;
}
.ant-input{
  width: 100% !important;
}
// ::v-deep .ant-form-item-label label {
//     color: rgba(0, 0, 0, 0.85);
//     margin-right: 10px !important;
// }

.resize {
  resize: "none";
}

.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
</style>
<style lang="less">
.form-item-bottom-num{
  .ant-form-item{
    margin-bottom: 0px !important;
  }
  .ant-form-item-label{
        width: 120px !important;
    }
    .ant-form-item-control-wrapper{
        width: 150px !important;
    }
}
.witdh100{
  width: 100% !important;
}
.form-item-box-witdh-l{
  .ant-form-item-control-wrapper{
        width: 436px !important;
    }
}
.row-w100{
  width: 100% !important;
  .ant-form-item-control-wrapper{
    width: calc(100% - 120px) !important;
  }
}
</style>